﻿@model string
@using Masuit.MyBlogs.Core.Models.Entity

@{
    ViewBag.Title = "网站打赏";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Random r = new Random();
    List<Advertisement> ads = ViewBag.Ads;
}
<style>
    .bg-title {
        height: 50vh;
        max-height: 400px;
        position: relative;
        background: url(/Content/images/@(r.Next(1,9)).jpg) no-repeat center;
        background-size:cover;
        background-attachment: fixed;
    }
    .flex-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .flex-box>div{
        margin: 0 15px;
        width: 18%;
    }
    @@media only screen and (max-width: 1080px) {
        .flex-box>div{
            width: 29.8%;
        }
    }
</style>
<script src="https://cdn.staticfile.org/angular.js/1.7.7/angular.min.js"></script>
<script src="~/Scripts/tm.pagination.js"></script>
<script src="https://cdn.staticfile.org/ng-table/1.0.0/ng-table.js"></script>
<ol class="cd-breadcrumb triangle">
    <li><a asp-controller="Home" asp-action="Index">首页</a></li>
    <li class="current"><em>@ViewBag.Title</em></li>
</ol>
<div class="bg-title">
    <div class="header-content text-center">
        <h1 class="size48">
            喜欢我的作品和文章？
        </h1>
        <div class="divider"></div>
        <p class="size24">
            您的捐助就是给我最大的鼓励
        </p>
    </div>
</div>
@Html.Raw(Model)
<div class="container-fluid" ng-app="myApp" ng-controller="home as list">
    <div class="page-header margin-clear">
        <h2 class="size24">
            打赏名单(排名不分先后)：
        </h2>
    </div>
    <table ng-cloak ng-table="list.tableParams" class="table table-bordered table-hover table-condensed margin-clear" ng-form="list.tableForm" disable-filter="list.isAdding" tracked-table="list.tableTracker" style="margin: 0">
        <tr ng-repeat="row in $data" ng-form="rowForm" tracked-table-row="row">
            <td title="'打赏时间'" sortable="'DonateTime'">
                {{row.DonateTime|date:'yyyy-MM-dd'}}
            </td>
            <td title="'昵称'" sortable="'NickName'">
                {{row.NickName}}
            </td>
            <td title="'邮箱'" sortable="'Email'">
                {{row.Email}}
            </td>
            <td title="'QQ或微信'" sortable="'QQorWechat'">
                {{row.QQorWechat}}
            </td>
            <td title="'金额'" sortable="'Amount'">
                {{row.Amount}}
            </td>
        </tr>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</div>
@if (ads.Count == 2)
{
    <div class="container-fluid">
        <div class="page-header margin-clear">
            <h2 class="size24" style="display: inline">
                推广支持：
            </h2>
        </div>
        <div class="row">
            <div class="col-md-6">
                @{
                    await Html.RenderPartialAsync("_ArticleListAdvertisement", ads[0]);
                }
            </div>
            <div class="col-md-6">
                @{
                    await Html.RenderPartialAsync("_ArticleListAdvertisement", ads[1]);
                }
            </div>
        </div>
    </div>
}
<script>
    var app = angular.module('myApp', ["ngTable", "tm.pagination"]);
    app.config(["$httpProvider", function ($httpProvider) {
        $httpProvider.defaults.transformRequest = function (obj) {
            var str = [];
            for (var p in obj) {
                if (obj.hasOwnProperty(p)) {
                    str.push(window.encodeURIComponent(p) + "=" + window.encodeURIComponent(obj[p]));
                }
            }
            return str.join("&");
        };

        $httpProvider.defaults.headers.post = {
            'Content-Type': 'application/x-www-form-urlencoded; charser=UTF-8'
        }
    }]);
    app.controller("home", ["$scope", "$http", "NgTableParams", function ($scope, $http, NgTableParams) {
        var self = this;
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 10,
            pagesLength: 15,
            perPageOptions: [10, 15, 20, 30, 50, 100],
            rememberPerPage: 'perPageItems',
            onChange: function () {
                window.loading();
                $http.post("/DonateList", {
                    page: $scope.paginationConf.currentPage,
                    size: $scope.paginationConf.itemsPerPage
                }).then(function (res) {
                    $scope.paginationConf.totalItems = res.data.TotalCount;
                    $("div[ng-table-pagination]").remove();
                    self.tableParams = new NgTableParams({
                        count: 50000
                    }, {
                        filterDelay: 0,
                        dataset: res.data.Data
                    });
                    window.loadingDone();
                });
            }
        };
    }]);
</script>